
import React, { useState, useEffect } from 'react'
import { Layout, Row, Col, Tabs, Input, Button, Table, message } from 'antd';
import { LinkOutlined } from '@ant-design/icons';
import copy from "copy-to-clipboard";
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import UserMenu from '@/components/userMenu'
import arrowRight from '../../assets/img/invite/arrow-right.png'
import pigIcon from '../../assets/img/invite/pig.png'
import buyIcon from '../../assets/img/invite/buy.png'
import endIcon from '../../assets/img/invite/end.png'
import registerIcon from '../../assets/img/invite/register.png'
import inviterIcon from '../../assets/img/invite/inviter.png'
import API from '@/api/api'
import './index.scss';
const { Content } = Layout;
const { Column } = Table;
const { TabPane } = Tabs;

function Invite(props) {
    const [url, setUrl] = useState()
    const [pageSize, setPageSize] = useState(20)
    const [total, setTotal] = useState(0)
    const [incomeRate, setIncomeRate] = useState()
    const [inviteList, setInviteList] = useState([])
    const [inviteIncome, setInviteIncome] = useState([])
    const [inviteIncomeTotal, setInviteIncomeTotal] = useState([])

    useEffect(() => {
        getInvite()
    }, [])


    const getInvite = async () => {
        let res = await API.inviteInfo()
        if (res) {
            setUrl(res.data.url)
            setIncomeRate(res.data.incomeRate[1])
        }
    }


    const getInviteList = async () => {
        let res = await API.inviteList()
        if (res) {
            setInviteList(res.data)
        }
    }

    const getInviteIncome = async (page = 1) => {
        let opts = { page: page, size: pageSize }
        let res = await API.inviteIncome(opts)
        if (res) {
            setInviteIncome(res.data.lists)
            setInviteIncomeTotal(res.data.price)
            setTotal(res.data.total)
        }
    }

    const tabChange = (e) => {
        console.log(e);
        switch (e) {
            case 'index':
                getInvite()
                break;
            case 'list':
                getInviteList()
                break;
            case 'income':
                getInviteIncome()
                break;
            default:
                break;
        }
    }

    const changePage = async (page) => {
        getInviteIncome(page)
    }


    const copyUrl = () => {
        if (copy(url)) {
            message.success('复制成功');
        } else {
            message.warning('该浏览器不支持一键复制,请手动复制');
        }
    }
    return (
        <Layout className="layout">
            <HeaderBox />
            <Content>
                <Row className="invite main" justify="space-between">
                    <Col lg={4} md={20}>
                        <UserMenu current="5" />
                    </Col>
                    <Col className="invite-main" lg={19} md={20}>
                        <Tabs defaultActiveKey="1" onChange={tabChange}>
                            <TabPane tab="推广赚钱" key="index">
                                <Row className="invite-money-top" align="middle">
                                    <Col lg={7}>
                                        <img className="invite-money-img" src={pigIcon} alt="pig" />
                                    </Col>
                                    <Col lg={17}>
                                        <p className="invite-money-desc">邀请好友加入鲸矿，好友购买算力，你就可以获得佣金奖励。邀请好友越多，你获得的奖励越多，邀请好友数量不限哦，快行动吧!</p>
                                        <div className="invite-money-url">
                                            <p>
                                                <LinkOutlined />推广链接:
                                                <Input placeholder={url} />
                                                <Button type="primary" onClick={copyUrl}>复制链接</Button>
                                            </p>
                                            <p>返佣比例：{incomeRate * 100 | 0}%</p>
                                        </div>
                                    </Col>
                                </Row>
                                <h3 className="invite-money-step">四步赚赏金</h3>
                                <Row className="money-step" align="middle">
                                    <Col className="money-step-item">
                                        <img className="money-step-img" src={inviterIcon} alt="step" />
                                        <p>邀请好友</p>
                                    </Col>
                                    <img className="money-step-right" src={arrowRight} alt="step" />
                                    <Col className="money-step-item">
                                        <img className="money-step-img" src={registerIcon} alt="step" />
                                        <p>完成注册</p>
                                    </Col>
                                    <img className="money-step-right" src={arrowRight} alt="step" />
                                    <Col className="money-step-item">
                                        <img className="money-step-img" src={buyIcon} alt="step" />
                                        <p>购买算力</p>
                                    </Col>
                                    <img className="money-step-right" src={arrowRight} alt="step" />
                                    <Col className="money-step-item">
                                        <img className="money-step-img" src={endIcon} alt="step" />
                                        <p>完成返佣</p>
                                    </Col>
                                </Row>
                            </TabPane>
                            <TabPane tab="我的推荐" key="list">
                                <Table className="invite-table" dataSource={inviteList} pagination={false}  >
                                    <Column title="被邀请人" dataIndex="name" key="name" />
                                    <Column title="累计返佣" render={tags => (
                                        <>
                                            {tags.total} {tags.coin_name}
                                        </>
                                    )} />
                                </Table>
                            </TabPane>
                            <TabPane tab="返佣记录" key="income">
                                <Row className="invite-record-title">
                                    合计总收益：≈ {inviteIncomeTotal.total} {inviteIncomeTotal.symbol}
                                </Row>
                                <Table className="invite-table" dataSource={inviteIncome} pagination={false} pagination={{
                                    pageSize: pageSize, total: total,
                                    onChange: changePage
                                }}>
                                    <Column title="时间" dataIndex="time" key="time" />
                                    <Column title="币名" dataIndex="coin" key="coin" />
                                    <Column title="收支" render={tags => (
                                        <>
                                            + {tags.total}
                                        </>
                                    )} />
                                    <Column title="状态" dataIndex="status" key="status" render={tags => (
                                        <>
                                            云算力
                                        </>
                                    )} />
                                </Table>
                            </TabPane>
                        </Tabs>
                    </Col>
                </Row>
            </Content>
            <FooterBox />
        </Layout>
    )
}

export default Invite